<template>
  <div class="binding-container">
    <ComHeader title="绑定手机" leftArrow="true"/>
    <div class="binding-tips">
      <h3>HI,{{ getUserInfo().nickname }}</h3>
      <p>
        {{ bindingTexts[bindingStatus].tipsText }}
      </p>
    </div>
    <!-- 已绑定账号的界面 ，需要有缓存数据，并且绑定手机为true-->
    <div class="container" v-if="bindingStatus == 0">
      <div class="container-bj">
        <div class="userInfo">
          <img class="max" src="/static/version2.0/binding/phone_img_ph@2x.png">
          <p class="binding-text">
            已绑定手机号
          </p>
          <p class="binding-phone">
            {{getUserInfo().username}}
          </p>
          <div class="submit-btn">
            <mt-button @click="replacePhone" type="primary" size="normal">更换手机号码</mt-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 未绑定账号的，注册界面 -->
    <div class="register" v-else>
      <div class="forms" v-for="i in bindingTexts" v-if="bindingStatus == i.status">
        <div class="form-group">
          <div class="form-name"><img class="max" src="/static/version2.0/binding/bound_icon_phone@2x.png"></div>
          <div class="form-value">
            <input
              type="number"
              name
              value
              v-model.trim="userPhone"
              maxlength="11"
              :placeholder="i.phoneText"
              @blur.prevent="changeCount()">
              <div class="btn-code" @click="clickSendCode()">
                <span v-show="show">获取验证码</span>
                <span v-show="!show" class="count">{{count}}S</span>
              </div>
          </div>
        </div>
        <div class="form-group">
          <div class="form-name">
            <img class="max" src="/static/version2.0/binding/bound_icon_verify@2x.png">
          </div>
          <div class="form-value">
            <input type="text" name value maxlength="6" v-model.trim="userCode" placeholder="请输入验证码">
          </div>
        </div>
        <div class="form-group tuijian" v-if="showtuijian">
          <div class="form-name">
            <img class="max" src="/static/version2.0/binding/bound_icon_bound_icon_id@2x.png" alt="">
          </div>
          <div class="form-value">
            <input type="number" name value v-model="tuijianren" placeholder="请输入推荐人ID">
          </div>
        </div>
        <div class="submit-btn">
          <mt-button @click="clickSubmit()" type="primary" size="normal">{{ i.btnText }}</mt-button>
        </div>
      </div>
    </div>

    <div class="dialog-mask binding-success" v-show="showSuccessTips">
      <div class="dialog-mask-bg" @click="showSuccessTips = false"></div>
      <div class="dialog-mask-wrap">
        <div class="dialog-mask-main">
          <div class="bs-icon">
            <img class="max" src="/static/version2.0/binding/phone_img_succeed@2x.png" alt="">
          </div>
          <p>
            手机号绑定成功
          </p>
          <div class="submit-btn" @click="showSuccessTips = false">
            <mt-button type="primary" size="normal">我知道了</mt-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/fetch/api";
import { Toast, Button } from "mint-ui";
import ComHeader from "@/common/ComHeader";
import { tranPhonePast, tranPhoneNew } from "@/api/register";

const TIME_COUNT = 60;
export default {
  name: "register",
  components: {
    Toast,
    Button,
    ComHeader
  },
  data() {
    return {
      userPhone: null, // 输入手机号码
      userCode: null, // 验证码
      show: true, // 是否显示获取验证码
      count: "", // 倒计时秒数
      timer: null, // 设置倒计时时间
      yanzheng: false, // 验证手机号码是否合法
      tuijianren: "", // 推荐人id
      showtuijian: true, // 是否显示推荐人
      chongzhi: false, // 重置时间倒数
      showSuccessTips: false,
      // 未绑定提示
      // 0=已绑定, 1=未绑定, 2=验证, 3=换绑
      bindingTexts: [{
        status: 0,
      },{
        status: 1,
        tipsText: '绑定手机号有利于保护您的财产安全！',
        phoneText: '请输入手机号码',
        btnText: '绑定',
      },{
        status: 2,
        tipsText: '为确保您的账号安全，需要先进行手机号码验证！',
        phoneText: '请输入手机号码',
        btnText: '下一步',
      }, {
        status: 3,
        tipsText: '还差最后一步，就可以换绑手机啦。',
        phoneText: '请输入新的手机号',
        btnText: '绑定',
      }],
      bindingStatus: 1,
    };
  },
  created() {
    if(this.getUserInfo() && this.getUserInfo().is_bind_phone){
      this.bindingStatus = 0;
    }
    let params1 = {
      uid: this.getUserInfo().id
    };
    api.getMySuperior(params1).catch(error => {
      if (error.data.id) {
        this.showtuijian = false;
      }
    });
  },

  methods: {
    // 更换手机号码
    replacePhone() {
      this.bindingStatus = 2;
      this.userPhone = this.getUserInfo().username;
      this.yanzheng = true;
    },
    //  1、手机号输入，失去焦点，验证手机号
    changeCount() {
      this.chongzhi = false;
      this.yanzheng = false;
      // 验证手机号是否合法
      if (!/^1[3456789]\d{9}$/.test(this.userPhone)) {
        this.yanzheng = false;
        // 不合法的提示信息
        if (this.userPhone) {
          Toast('手机号码有误，请重填');
          this.chongzhi = true;
        }
      } else {
        // 合法，进入下一步
        this.yanzheng = true;
      }
      // ！！！！！！！！！！！！！发起请求，查找本手机是否已注册过用户，如果已注册，拦截，并重新输入 ，后期优化
    },

    //  2、点击获取验证码的按钮
    clickSendCode() {
      // 手机号合法，才往下执行
      if (this.yanzheng) {
        var purpose = 2;
        // 验证旧手机号
        if(this.bindingStatus == 2){
          purpose = 4
        }
        // 发送验证码的
        const params2 = {
          purpose: purpose,
          phone: this.userPhone,
          uid: this.getUserInfo().id
        };
        api.entrySendcode(params2).catch(error => {
          Toast(error.data.msg);
          if(error.data.code == 0){
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.show = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  // 如果失败，立即重置验证码按钮
                  if (this.chongzhi == true) {
                    this.show = true;
                    clearInterval(this.timer);
                    this.timer = null;
                  }
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
          }

        });
      } else {
        // 没有输入手机号时，点击验证码的提示信息
        if(!this.userPhone){
          Toast('请输入手机号码')
        }
      }
    },

    //  3、立即绑定的按钮
    clickSubmit() {
      if (!this.userPhone) {
        Toast("请填写手机号码");
      } else if (!this.userCode) {
        Toast("请填写验证码");
      } else {
        if(this.bindingStatus == 1){
          this.bindingPhone();
        }else if (this.bindingStatus == 2) {
          this.tranPhonePast();
        }else if (this.bindingStatus == 3) {
          this.tranPhoneNew();
        }

      }
    },

    // 绑定手机号码
    bindingPhone() {
      // 绑定手机的请求
      // 根据是否填推荐人，配置不同的params
      if (this.showtuijian == true) {
        var params3 = {
          phone: this.userPhone,
          authCode: this.userCode,
          uid: this.getUserInfo().id,
          parent_id: this.tuijianren
        };
      } else {
        var params3 = {
          phone: this.userPhone,
          authCode: this.userCode,
          uid: this.getUserInfo().id
        };
      }
      api.bindingPhone(params3).catch(error => {
        if (error.data.msg == "绑定成功") {
          this.showSuccessTips = true;
          // 重置本地缓存wxUserInfo
          this.getUserInfo().is_bind_phone = true;
          this.getUserInfo().username = this.userPhone;
          this.setlocalStorage(this.companyUnique, this.getUserInfo());
          // 跳转页面
          setTimeout(() => {
            this.$router.push("/my");
          }, 300);
        }else{
          Toast(error.data.msg);
        }
      });
    },
    // 更换手机号，验证旧的手机号码
    tranPhonePast() {
      tranPhonePast({
        phone: this.userPhone,
        purpose: 4,
        inputCode: this.userCode,
      }).then(res=>{
        console.log(res)
        if(res.code == 0){
          this.userPhone = '';
          this.yanzheng = false;
          this.userCode = '';
          this.show = true;
          this.count = 0;
          Toast('原手机号码验证成功')
          this.bindingStatus = 3;
        }else{
          Toast(res.msg)
        }
      })
    },
    // 绑定新的手机号码
    tranPhoneNew() {
      tranPhoneNew({
        uid: this.getUserInfo().id,
        phone: this.userPhone,
        purpose: 2,
        inputCode: this.userCode,
      }).then(res=>{
        if(res.code == 0){
          this.userPhone = '';
          this.yanzheng = false;
          this.userCode = '';
          this.show = true;
          this.count = 0;
          this.showSuccessTips = true;
          this.bindingStatus = 0;
          this.setlocalStorage(this.companyUnique, res.data);
        }else{
          Toast(res.msg)
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.binding-container{
  .binding-success{
    .bs-icon{
      width: 4.37rem;
      margin: 0 auto;
    }
    p{
      text-align: center;
      font-size: .4rem;
      padding-top: .2rem;
    }
    .submit-btn{
      padding-bottom: 1rem;
      margin: 0 .4rem;
    }
  }
  .binding-tips{
    margin: 0 .88rem;
    margin-top: 2rem;
    h3{
      font-size: .56rem;
      padding-bottom: .1rem;
    }
    p{
      color: #9B9B9B;
      margin-bottom: 1.06rem;
    }
  }
}
.register {
  padding: 0.6rem;
  padding-top: 0;
  background-color: #F4F4F4;

  .bg {
    padding-top: 2rem;
    padding-bottom: 0.4rem;
  }
}

.binding-container .container{
  background-color: #fff;
  height: 17rem;
}

.form-group {
  overflow: hidden;
  padding: 0.05rem 0.37rem;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  border-radius: 1rem;
  margin-bottom: .4rem;
  .form-name {
    float: left;
    width: .734rem;
    img{
      margin-top: .2rem;
    }
  }

  .form-value {
    float: right;
    width: 7.3rem;
    line-height: 1.2rem;
    position: relative;

    .btn-code span {
      position: absolute;
      right: 0;
      top: 0.1rem;
      display: block;
      text-align: center;
      color: #26a2ff;
      border-radius: 0.2rem;
      font-size: 0.36rem;
      line-height: 1rem;
      padding: 0 0.3rem;
    }

    .btn-code .count {

    }
  }

  input {
    border: none;
    /* border: 1px solid #ddd; */
    width: 94%;
    padding: 0.2rem;
  }
}

.agree {
  margin-top: 20px;

  span {
    display: inline-block;
  }

  .agree-name {
    vertical-align: middle;
  }

  .agree-value {
    vertical-align: middle;
    color: #26a2ff;
  }
}

.false {
  background-color: #999;
}

.tips {
  color: #c5575a;
  padding-top: 0.4rem;
  font-size: 0.36rem;
}

.submit-btn {
  padding-top: 0.6rem;
  .mint-button--primary {
    width: 100%;
    line-height: 1.3rem;
    height: 1.3rem;
    border-radius: 1rem;
    letter-spacing: 2px;
  }
}

.container {
  width: 100%;
  height: 7rem;
  position: absolute;
  top: 1.45rem;
  .userInfo img{
    width: 4rem;
    margin-top: 1.52rem;
  }
  .submit-btn{
    margin: 0 auto;
    width: 7.73rem;
  }
  .container-bj {
    .binding-text{
      font-size: .37rem;
      color: #9B9B9B;
      margin-top: .3rem;
    }
    .binding-phone{
      color: #000000;
      font-size: .64rem;
      margin-top: .12rem;
    }

    // 用户信息
    .userInfo {
      text-align: center;

      .nickname {
        font-size: 0.46rem;
        padding: 0.2rem 0;
      }

      .level {
        font-size: 0.46rem;
      }

      .bangding {
        padding: 0.3rem 0;
        font-size: 0.46rem;
      }
    }
  }
}

</style>
